<template>
    <div>
        <h1>展示页面</h1>
        <center>
            姓名：<input type="text" v-model="name">
            <button @click="fnFilter()">筛选</button>
            <table>
                <tr>
                    <th>ID</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>工资</th>
                    <th>城市</th>
                </tr>
                <tr v-for="item in queryList">
                    <td>{{ item.id }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.age }}</td>
                    <td>{{ item.gender }}</td>
                    <td>{{ item.payment }}</td>
                    <td>{{ item.city }}</td>
                </tr>
            </table>
        </center>
    </div>
</template>


<script>
export default {
    data() {
        return {
            queryList:[],
            name:'',
        }
    },
    mounted() {
        this.axios.post('/api/show').then(res=>{
            var data = res.data
            if(data.code == 200){
                console.log(data)
                this.queryList = data.querylist
            }
        })
    },
    methods: {
        fnFilter(){
            this.axios.post('/api/filter',{
                'name':this.name
            }).then(res=>{
                var data = res.data
                if(data.code == 200){
                    console.log(data)
                    this.queryList = data.filterlist
                }
            })
        }
    },
}
</script>

<style lang="">
    
</style>